<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../../common.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!doctype html>
<html>
<title>${article.title }</title>
<script type="text/javascript" src="${staticPath}/js/ueditor/ueditor.parse.js"></script>
<script type="text/javascript" src="http://g.alicdn.com/de/prismplayer/1.4.7/prism.js"></script>
<link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/1.4.7/skins/default/index.css" />
<style>
div a {
	padding-left: 10px;
}
</style>
<script type="text/javascript">
	$(function() {
		$("#sharea").click(function(event) {
			$("#shareDiv").show();
			$(document).one("click", function() {//对document绑定一个影藏Div方法
				$("#shareDiv").hide();
			});
			event.stopPropagation();//阻止事件向上冒泡
		});
		uParse('#content', {
			rootPath : appPath + '/js/ueditor'
		})
	});
</script>
<body>
	<header class="OldHeader">
		<div class="OHeader" style="z-index: 1000">
			<h1>
				<c:if test="${article.title.length() > 10 }">
					${article.title.substring(0, 10) }
				</c:if>
				<c:if test="${article.title.length() <= 10 }">
					${article.title }
				</c:if>
			</h1>
			<div class="OHeadBack">
				<a href="javascript:void(0)" onclick="history.go(-1)">
					<img src="${staticPath}/images/back.png">
				</a>
			</div>
			<div class="centerOHeadset">
				<a href="javascript:void(0);" id="sharea">
					<img id="shareImg" src="${staticPath}/images/share.png" style="float: right;">
				</a>
			</div>
		</div>
	</header>
	<div id="shareDiv" class="jiathis_style_m" style="display:none;float:right;position: absolute;top:45px;right:0px;"></div>
	<article class="weui_article">
		<h1 style="text-align: center;">${article.title }</h1>
		<p style="text-align: center;">
			<fmt:formatDate value="${article.time }" type="both" />
		</p>
		<div id="content">${article.content }</div>
	</article>
	<script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_m.js" charset="utf-8"></script>
	<script>
		$(".prism-player").each(function() {
			var heightdate = $(this).attr("heightdate");
			var fileSource = $(this).attr("dataurl");
			var containerId = $(this).attr("id");
			var player = new prismplayer({
				id : containerId, // 容器id
				source : fileSource, // 视频url 支持互联网可直接访问的视频地址
				//source: "http://player.ku6.com/inside/XGZadFw5voEoeHNbH4c4Gg../v.swf&adss=0",
				autoplay: false,      // 自动播放
				width: "auto",       // 播放器宽度
				height: heightdate,  
				skinLayout : [ {
					"align" : "blabs",
					"x" : 30,
					"y" : 80,
					"name" : "bigPlayButton"
				}, {
					"align" : "blabs",
					"x" : 0,
					"y" : 0,
					"name" : "controlBar",
					"children" : [ {
						"align" : "tlabs",
						"x" : 0,
						"y" : 0,
						"name" : "progress"
					}, {
						"align" : "tr",
						"x" : 20,
						"y" : 25,
						"name" : "fullScreenButton"
					}, {
						"align" : "tr",
						"x" : 20,
						"y" : 25,
						"name" : "volume"
					} ]
				} ]
			});
		});
	</script>
</body>
</html>